<template>
	<view>
		<view class="content">
			<div class="search">
				<u-search @change='serchSearch' placeholder="输入关键字" :show-action='false' v-model="search"></u-search>
			</div>
			<!-- 正文内容 -->
			<u-empty v-if="orderList.length===0 || !orderList" text="暂无数据" mode="list"></u-empty>
			<div class="order_list" v-else>
				<div class="item" :class="{ active: item.type!=3}" @click="clickItem(item)" v-for='(item,index) in orderList' :key='index'>
					<div class="top">
						<div class="info">
							<div class="img">
								<image src="../../static/image/car.png" mode=""></image>
							</div>
							<div class="con">
								<p>车牌号码：{{item.carNum}}</p>
								<p>车辆类型：{{item.carType}}</p>
								<p v-if="item.orderType">验车方式：{{item.orderType|orderType}}</p>
								<p v-else>验车方式：{{item.type===3?'到场检测':'预约检测'}}</p>
							</div>
						</div>
						<div class="status">
							<p>环保录入：<span>{{item.inputStatus ===1?'待录入':item.inputStatus ===2?'录入中':'已录入'}}</span></p>
							<p>安检录入：<span>{{item.inputAjStatus ===1?'待录入':item.inputAjStatus ===2?'录入中':'已录入'}}</span></p>
						</div>
					</div>
					<div class="btm">
						<p>验车日期：{{item.times}}</p>
						<p>金额：{{item.payAmount}}</p>
						<p>手机号：{{item.mobile}}</p>
						<p>用户姓名：{{item.username}}</p>
						<div class="time" v-if="item.printDate">
							提交时间：{{item.printDate|getDateDiff}}
						</div>
					</div>
				</div>
				<u-loadmore :status="status" />
			</div>
			<u-toast ref="uToast" />
			<u-action-sheet @click="clickList" :list="list" v-model="show"></u-action-sheet>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:null,//区分页面
				title:null,//标题
				search:null,//搜索关键字
				status:'nomore',//加载中：loading,没有数据：nomore,加载更多：loadmore
				userInfo:null,//用户信息
				orderList:[],//数据列表
				activeId:null,//当前选中
				page:1,//默认页码
				show:false,
				list: [{
					text: '环保录入'
				}, {
					text: '安检录入'
				}],
			};
		},
		onLoad(option) {
			
			try {
			    const value = uni.getStorageSync('userStatus');
			    if (!value) {
			        uni.navigateTo({
			            url: "/pages/my/login"
			        });
			    }else{
					this.userInfo = value
					console.log(this.userInfo)
				}
			} catch (e) {
			    // error
				console.log('错误',e)
			}
			this.type = option.type
			this.search = option.key
			this.title = option.title
			this.getData()
		},
		onPullDownRefresh(){
			console.log('下拉刷新')
			this.page = 1
			this.getData()
		},
		onReachBottom(){
			console.log('上拉加载')
			this.page = this.page+1
			this.status = 'loading'
			this.getData()
		},
		methods:{
			//socket
			wSocket(){
				
			},
			//获取数据
			getData(){
				console.log(this.page)
				/* let data = {
					page:this.page,
					pageSize:30,
				}
				if(this.type){
					data = {
						userId: this.userInfo.id,
						pageNum: this.page,
						type: this.type,
						pageSize: 30
					}
				} */
				uni.request({
				    //url: this.url, 
					url:this.$api.appCarInputOverData,
				    data: {
						userId: this.userInfo.id,
						page: this.page,
						type: this.type,
						pageSize: 30,
						carNum:this.search,
					},
				    success: (res) => {
						uni.stopPullDownRefresh();
						console.log(res.data);
				        if(res.data){
							
							if(res.data.data.length>=30){
								this.status = 'loadmore'
							}else{
								this.status = 'nomore'
							}
							if(this.page>1){
								this.orderList = this.orderList.concat(res.data.data)
								
							}else{
								this.orderList = res.data.data
							}
						}else{
							
							this.status = 'loadmore'
						}
				    },fail:(err)=>{
						console.log(err)
						this.$refs.uToast.show({
							title: '与服务器连接失败，请检查网络状况',
							type: 'error'
						})
				    	uni.stopPullDownRefresh();
						this.status = 'loadmore'
				    }
				});
			},
			//点击数据
			clickItem(e){
				console.log(e)
				if(this.title === '待录入数据'){
					this.show = true
				}else{
					uni.navigateTo({
					    url: "/pages/order/content?id="+e.id+'&type=0'
					});
				}
				
				this.activeId = e.id
			},
			//选择
			clickList(index){
				console.log(index)
				let type = null
				if(index ===0){
					type = 1
				}else{
					type = 2
				}
				uni.navigateTo({
				    url: "/pages/order/content?id="+this.activeId+'&type='+type
				});
			},
			//搜索
			serchSearch(e){
				console.log('搜索--------',e)
				this.search = e
				this.getData()
				
			}
		},
		filters:{
			getDateDiff(dateTimeStamp) {
			    var result = ''
			    var minute = 1000 * 60
			    var hour = minute * 60
			    var day = hour * 24
			    var month = day * 30
			    var now = new Date().getTime()
			    //var ddd = dateTimeStamp.replace(/-/g,'/')
			    //var diffValue = now - new Date(ddd).getTime()
			    var diffValue = now - dateTimeStamp
			    if (diffValue < 0) return
			    var monthC = diffValue / month
			    var weekC = diffValue / (7 * day)
			    var dayC = diffValue / day
			    var hourC = diffValue / hour
			    var minC = diffValue / minute
			    if (monthC >= 1) {
			     result = "" + parseInt(monthC) + "月前"
			    } else if (weekC >= 1) {
			     result = "" + parseInt(weekC) + "周前"
			    } else if (dayC >= 1) {
			     result = "" + parseInt(dayC) + "天前"
			    } else if (hourC >= 1) {
			     result = "" + parseInt(hourC) + "小时前"
			    } else if (minC >= 1) {
			     result = "" + parseInt(minC) + "分钟前"
			    } else {
			     result = "刚刚"
			    }
			    return result
			},
			orderType(e){
				switch (e){
					case 1:
						return '货车综检';
						break;
					case 2:
						return '客车综检';
						break;
					case 3:
						return '新车';
						break;
					case 4:
						return '变更车辆';
						break;
					default :
						return '事故车辆';
				}
			}
		}
	
	}
</script>

<style lang="less">
	.content{
		width: 96%;
		margin: 0 auto;
		.search{
			margin: 20rpx auto;
		}
		.order_list{
			.item{
				border-radius: 10rpx;
				box-shadow: 0 0 5rpx rgba(0,0,0,0.3);
				box-sizing: border-box;
				background-color: #fff;
				margin-bottom: 20rpx;
				.top{
					display: flex;
					justify-content: space-between;
					font-size: 14px;
					padding: 30rpx 10rpx 0 10rpx;
					p{
						line-height: 50rpx;
					}
					.info{
						display: flex;
						.img{
							image{
								width: 140rpx;
								height: 140rpx;
								border-radius: 50%;
							}
						}
					}
					.status{
						margin-top: 20rpx;
						span{
							color:red;
						}
					}
				}
				.btm{
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					font-size: 12px;
					padding: 30rpx 10rpx 10rpx 10rpx;
					border-radius: 0 0 10rpx 10rpx;
					p{
						width: 50%;
						line-height: 48rpx;
					}
					div{
						width: 100%;
						text-align: right;
						color: #606266;
					}
				}
			}
			.active{
				background-color: #c5ebe7;
			}
		}
	}
</style>
